<template>
  <div class="content-body flex-bcenter">
    <div class="video-box flex flex-1 both-100 marginr-15">
      <BaseCard>
        <template #content>
          <VideoPreview :code="value" :elementId="'CONTROL' + value" />
        </template>
      </BaseCard>
    </div>
    <div class="list-box flex-column width20">
      <div class="alarm-video item-box marginb-15">
        <CustomTitle title="实时视频"></CustomTitle>
        <div class="item-body">

        </div>
      </div>
      <div class="control-box item-box">
        <CustomTitle title="云台控制"></CustomTitle>
        <div class="item-body flex-jcenter">
          <div class="video-control flex-column">
            <div class="control marginb-15">
              <div class="control-button pointer" :class="item.position" v-for="item in controlBtn" :key="item.icon" @click="controllCommand('command',item.operation)">
                <i class="iconfontShuzhi" :class="'icon-' + item.icon"></i>
              </div>
            </div>
            <div class="speed flex-jcenter">
              <div class="speed-button" @click="controllCommand('speed',speed - 10)">
                <i class=" iconfontShuzhi icon-jian"></i>
              </div>
              <span>倍速</span>
              <div class="speed-button" @click="controllCommand('speed',speed + 10)">
                <i class="iconfontShuzhi icon-jia"></i>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import VideoPreview from '@/components/VideoPreview'
import { controllCamera } from '@/api'
export default {
  props: {
    value: {
      type: String,
      default: ''
    }
  },
  data () {
    return {
      // 控制按钮图标
      controlBtn: [
        {
          icon: 'sanjiao-shang',
          position: 'top',
          operation: 'UP'
        },
        {
          icon: 'shuaxin2',
          position: 'center',
          operation: 'ACTION'
        },
        {
          icon: 'sanjiao-xia',
          position: 'bottom',
          operation: 'DOWN'
        },
        {
          icon: 'sanjiao-zuo',
          position: 'left',
          operation: 'LEFT'
        },
        {
          icon: 'sanjiao-you',
          position: 'right',
          operation: 'RIGHT'
        }
      ],
      // 摄像头倍速
      speedBtn: [
        {
          icon: 'jia'
        },
        {
          icon: 'jian'
        }
      ],
      // 云台速度
      speed: 50,
    };
  },
  computed: {},
  watch: {},
  methods: {
    // 控制摄像头角度
    async controllCommand (type, operation) {
      const params = {
        action: 0,
        speed: this.speed,
        cameraIndexCode: this.value,
        [type]: operation
      }
      await controllCamera(params)
      if (controllCamera.code === 200) {
        this.$message.success('操作成功')
      }
    },
  },
  created () {

  },
  mounted () {

  },
  components: {
    VideoPreview
  },
}
</script>

<style lang='less' scoped>
.list-box {
  height: 100%;
  .item-box {
    height: 50%;
    .item-body {
      height: calc(100% - 45px);
      overflow: auto;
      .video-control {
        width: 140px;
        height: 100%;
        .control {
          width: 100%;
          height: 140px;
          background: url("@/assets/images/control.png") no-repeat center;
          background-size: 100% 100%;
          position: relative;
          .control-button {
            display: inline-block;
            transition: all ease 0.2s;
            font-size: 20px;
            position: absolute;
            color: #fff;
            &:hover {
              color: @primary;
            }
          }
          .top {
            top: 10px;
            left: 50%;
            transform: translateX(-50%);
          }
          .right {
            right: 15px;
            top: 50%;
            transform: translateY(-50%);
          }
          .bottom {
            bottom: -1px;
            left: 43%;
            transform: translateY(-50%);
          }
          .left {
            left: 23px;
            top: 40%;
            transform: translateX(-50%);
          }
          .center {
            left: 50%;
            top: 42%;
            transform: translateX(-50%);
            line-height: 100%;
          }
        }
        .speed {
          line-height: 32px;
          color: #fff;
          .speed-button {
            display: flex;
            width: 32px;
            height: 32px;
            line-height: 32px;
            align-content: center;
            justify-content: center;
            background: url(@/assets/images/speed.png) no-repeat center;
            background-size: 100% 100%;
            cursor: pointer;
            i {
              font-size: 12px;
            }
            &:hover {
              color: @primary;
            }
          }
        }
      }
    }
  }
}
</style>